<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件对象的属性解析(Attribute analysis of event objects)</title>
  <!-- 
  在JavaScript中，事件对象是与事件相关的信息的集合。当事件被触发时，浏览器会创建一个事件对象并将其传递给事件处理函数。事件对象包含了许多有用的属性和方法，开发者可以通过这些属性和方法来获取事件的详细信息和控制事件的行为。
  一、常见的事件对象属性
  1. type：
    - 表示事件的类型，例如 'click'、'keydown'、'mouseover' 等。
    - 通过 event.type 可以获取。
    element.addEventListener('click', function(event) {
      console.log(event.type); // 输出: 'click'
    });
  2. target：
    - 指向触发事件的元素，即事件的目标。
    - 通过 event.target 可以获取。
    element.addEventListener('click', function(event) {
      console.log(event.target); // 输出被点击的元素
    });
  3. currentTarget：
    - 指向当前正在处理事件的元素，通常是事件处理函数绑定的元素。
    - 通过 event.currentTarget 可以获取。
    element.addEventListener('click', function(event) {
      console.log(event.currentTarget); // 输出绑定事件的元素
    });
  4. bubbles：
    - 一个布尔值，指示事件是否可以冒泡。如果为 true，表示事件会向父元素传播；如果为 false，则不会。
    - 通过 event.bubbles 可以获取。
  5. cancelable：
    - 一个布尔值，指示事件是否可以被取消。如果为 true，表示可以通过调用 event.preventDefault() 来阻止事件的默认行为。
    - 通过 event.cancelable 可以获取。
  6. timeStamp：
    - 表示事件被创建的时间戳，以毫秒为单位。这个时间戳是相对于文档加载时间的。
    - 通过 event.timeStamp 可以获取。

  二、常用的方法
  1. preventDefault()：
    - 阻止事件的默认行为，例如阻止链接跳转、表单提交等。
    - 语法：event.preventDefault()。
    link.addEventListener('click', function(event) {
      event.preventDefault(); // 阻止链接跳转
      console.log('链接被点击，但不会跳转！');
    });
  2. stopPropagation()：
    - 阻止事件冒泡，即不将事件传递到父元素。
    - 语法：event.stopPropagation()。
    child.addEventListener('click', function(event) {
      event.stopPropagation(); // 阻止事件冒泡
      console.log('子元素被点击');
    });
  3. stopImmediatePropagation()：
    - 阻止当前事件的所有其他处理程序被调用。这意味着即使有其他处理程序也会被忽略。
    - 语法：event.stopImmediatePropagation()。

  三、总结
  - 事件对象提供了丰富的信息和控制方法，帮助开发者获取事件的详细信息并控制事件的行为。
  - 常见的事件对象属性包括 type、target、currentTarget、bubbles、cancelable 和 timeStamp。
  - 常用的方法包括 preventDefault()、stopPropagation() 和 stopImmediatePropagation()，用于控制事件的默认行为和传播。
   -->
</head>
<body>

  <div class="attribute">
    <span class="event-btn">
      <button>事件对象的属性解析(Attribute analysis of event objects)</button>
    </span>
  </div>

  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>

  <script>
    const attribute = document.querySelector('.attribute');
    const eventBtn = document.querySelector('.event-btn');
    const btn = document.querySelector('button');

    // 事件属性
    eventBtn.addEventListener('click', function (event) {
      // 1. 偶尔会用
      console.log('事件类型：', event.type);
      console.log('事件阶段: ', event.eventPhase);

      // 2. 常用
      console.log('事件目标：', event.target);
      console.log('事件当前目标：', event.currentTarget);
      console.log('事件目标是否与当前目标相同：', event.target === event.currentTarget);

      // 3. 事件鼠标对象
      console.log('clientX 事件鼠标对象: ', event.clientX);
      console.log('clientY 事件鼠标对象: ', event.clientY);
      console.log('pageX 事件鼠标对象: ', event.pageX);
      console.log('pageY 事件鼠标对象: ', event.pageY);
      console.log('screenX 事件鼠标对象: ', event.screenX);
      console.log('screenY 事件鼠标对象: ', event.screenY);
      console.log('offsetX 事件鼠标对象: ', event.offsetX);
      console.log('offsetY 事件鼠标对象: ', event.offsetY)
      console.log('button 事件鼠标对象: ', event.button);

      // 不常用
      // 4. 事件键盘对象
      console.log('事件键盘对象: ', event.keyCode);
      console.log('事件键盘对象: ', event.key);
      console.log('事件键盘对象: ', event.code);
      // 5. 事件判断
      console.log('事件是否冒泡: ', event.bubbles);
      console.log('事件是否可取消: ', event.cancelable);
      console.log('事件触发时间: ', event.timeStamp);
      // 4. 事件默认行为
      console.log('事件默认行为: ', event.defaultPrevented);
      console.log('阻止默认行为: ', event.preventDefault());
      console.log('阻止默认行为: ', event.defaultPrevented);
      // 5. 事件传播
      console.log('事件传播: ', event.cancelBubble);
      console.log('阻止事件传播: ', event.stopPropagation());
      console.log('阻止事件传播: ', event.cancelBubble);
      // 6. 事件window对象
      console.log('事件window对象: ', event.view);
      console.log('事件window对象: ', event.view === window);
    });

    // 事件方法
    // btn.addEventListener('click', function (event) {
    //   event.preventDefault();
    //   event.stopPropagation();
    //   event.stopImmediatePropagation()
    // });

    
  </script>

  
</body>
</html>